<template>
  <div class="raiders">
    <div class="raidersAll" v-for="item in raidersList" :key="item.id" @click="toStrategy(item.id)">
      <div class="raidersTitle"> {{item.title}}</div>
      <div class="imgIcom">
        <img style="raidersImg" v-lazy="item.firstImg" alt="">
        <i class="raidersIcon">攻略</i>
      </div>
      <div class="raidersBot">
        <div class="raidersLef">
          <div class="raidersView">
            <i><img :src="view" alt=""></i>
            {{item.browseCount}}
          </div>
          <div class="raidersColl">
            <i><img :src="collection" alt=""></i>
            {{item.starSum}}
          </div>
        </div>
        <div class="raidersRig">
          <img :src="item.userHeadUrl" alt="">
          <span>{{item.userName}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script type='text/ecmascript-6'>
import testImg1 from '@/assets/img/testImg/12_06.png'
import testImg2 from '@/assets/img/testImg/12_10.png'
import view from '@/assets/img/view.png'
import collection from '@/assets/img/ding.png'
import axios from '@/api/axiosApi'

export default {
  data () {
    return {
      testImg1,
      testImg2,
      view,
      collection,
      raidersList: []
    }
  },
  components: {
  },
  created() {
    this.getRaiders()
  },
  methods: {
    getRaiders() {
      axios.get(this, '/v1/playStrategy', {
        pageSize: 50,
        articleType: 1
      }, (data) => {
        this.raidersList = data
        console.log(data)
      })
    },
    toStrategy (id) {
      this.$router.push(`/address/strategy/${id}`)
    }
  }
}
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
.raiders {
  padding 10px 15px
  background #f5f5f5
  overflow-y scroll 
  height 100%
  .raidersAll {
    margin-bottom 20px
    background #ffffff
    padding 4px 10px
    .raidersTitle {
      font-size 20px
      margin 10px
    }
    .imgIcom {
      position relative
      width 100%
      max-height 200px
      overflow hidden
      border-radius 5px
      img {
        border-radius 5px
        width 100%
      }
      .raidersIcon {
        position absolute 
        bottom 20px
        right 15px
        background rgba(0,0,0,0.4)
        font-size 10px
        color #fff
        padding 4px 10px
        border-radius 12px
      }
    }
    .raidersBot {
      display flex
      justify-content space-between
      margin 10px 0
      .raidersLef {
        display flex
        // justify-content space-between
        align-items center
        .raidersView {
          display flex
          align-items center
          margin-right 10px
          img {
            width 20px
            padding 8px 4px 0 0 
          }
        }
        .raidersColl {
          display flex
          align-items center
          img {
            width 20px
            padding 8px 4px 0 0 
          }
        }
      }
      .raidersRig {
        display flex
        align-items center
        img {
          width 30px
          height 30px
          border-radius 50px
          margin-right 6px
        }
        span {
          font-size 14px
          color #666
        }
      }
    }
  }
}
</style>
